<template>
  <div id="container"></div>
</template>

<script>

/* 
地图测试

*/
// @ is an alias to /src
import img from "./img/bottom-image.png";
import icon from "./img/marker.png";
const areas = require("./areas.json");
const lines = require("./lines.json");
import areaA01 from "./img/area-1.png";
import areaA02 from "./img/area-2.png";
import areaA03 from "./img/area-3.png";
import areaA04 from "./img/area-4.png";
import { drawAreas, drawLines, linesInit } from "./tools";
const bounds = [
  [115.836209, 28.59446],
  [115.947558, 28.467432],
];
// 缩放范围
const zooms = [0, 17];
// 园区中心坐标
const center = [115.89034, 28.538032];
let timer = null;
export default {
  name: "datavHome",
  components: {},
  data() {
    return {
      _basicLayer: null,
      isMapReady: false,
      img,
      icon,
      areaA01,
      areaA02,
      areaA03,
      areaA04,
      _map: null,
      lineIndex: 0,
      geo: null,
      _loca: null,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this._basicLayer = new AMap.ImageLayer({
        url: this.img,
        bounds: new AMap.Bounds(...bounds),
        zooms,
      });
      let buildLayer = new AMap.Buildings({
        zooms: [16, 18],
        heightFactor: 2, //2倍于默认高度，3D下有效
      });
      let defaultLayer = AMap.createDefaultLayer();
      var satellite = new AMap.TileLayer.Satellite();
      this._map = new AMap.Map("container", {
        zoom: 13.5, //级别
        zooms,
        zoomEnable: true, // 是否可以缩放
        resizeEnable: true,
        center: center, //中心点坐标
        pitch: 30,
        viewMode: "3D", //使用3D视图
        features: ["bg", "road"],
        mapStyle: "amap://styles/d40171d41c04c5461a9b2fcfe5b2322a",
        layers: [defaultLayer, buildLayer, this._basicLayer],
      });
      this._loca = new Loca.Container({
        map: this._map,
      });
      this.geo = new Loca.GeoJSONSource({
        url: "/json/lineGeo.json",
      });

      this._map.on("complete", () => {
        this.isMapReady = true;
        // 初始化区域
        this.initAreas();
        this.drawAreasImg(this.mapData);
        this._map.resize();
      });
      this._map.on("click", () => {
        // 同步数据
        // this.$emit("update:currentArea", "");
        // this.resetMap();
      });
    });
  },
  destroyed() {
    clearInterval(timer);
  },
  methods: {
    // 初始化区域
    initAreas() {
      // 绘制区域
      this._areas = drawAreas(this._map, areas);
      // 给每个区域绑定点击事件
      if (Array.isArray(this._areas)) {
        this._areas.forEach((area) => {
          area.on("click", (event) => {
            console.log(event);
            // 获取绑定的数据
            const { id } = event.target.getExtData();
            // 同步数据
            // 设置底图透明度，凸显效果
            // this._basicLayer.setOpacity(0.7);
          });
        });
      }
      linesInit(this._map, this._loca, this.geo);
      this.bezierCurve = drawLines(this._map, lines[0]);
        clearInterval(timer);
        timer = setInterval(() => {
          this._map.remove(this.bezierCurve);
          if (this.lineIndex == lines.length - 1) {
            this.lineIndex = 0;
          } else {
            this.lineIndex += 1;
          }
          this.bezierCurve = drawLines(this._map, lines[this.lineIndex]);
        }, 10000);
    },
    drawAreasImg(areas) {
      // debugger
      if (!Array.isArray(areas) || !areas.length) return;
      if (this.isMapReady !== true) return;
      this._areaLayers = {};
      areas.forEach((area) => {
        if (this._areaLayers[area.id]) return;
        this._areaLayers[area.id] = new AMap.ImageLayer({
          url: this[`area${area.id}`],
          bounds: new AMap.Bounds(...bounds),
          zooms,
          visible: true,
        });
        this._map.add(this._areaLayers[area.id]);
        this._areaLayers[area.id].on("complete", (e) => {
          this._areaLayers && this._areaLayers[area.id].hide();
        });
      });
    },
    setCenter(center, zoom = 13.5) {
      if (Array.isArray(center) && center.length) {
        this._map && this._map.setZoomAndCenter(zoom, center);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100vh;
}
/deep/ .custom-info {
  position: relative;
  padding-left: 40px;
  padding-bottom: 10px;
  .info-top {
    padding: 15px;
    background-image: url("./img/window_bg.png");
    background-size: 100% 100%;
      width: 436px;

  }
  .info-content{
      margin-top: 4px;
      .info-row{
          line-height: 32px;
          color: #fff;
          font-size: 21px;
      }
  }
  .info-title {
    color: #3289FE;
    font-size: 27px;
  }
  .info-bottom {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 40px;
    height: 40px;
    z-index: 99999999;
    background-image: url("./img/window_line.png");
    background-size: 100% 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
